<template>
  <a-card :bordered="false">
    <h2>动环节能策略设置</h2>
    <a-form
      :form="form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 4 }"
      @submit="handleSubmit"
    >
      <a-form-item label="数据中心">
        <a-select
          :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
          v-decorator="[
            'id',
            {
              initialValue: info.id,
              rules: [{ required: true, message: '请选择数据中心' }],
            },
          ]"
          @change="handleSelectChange"
        >
          <a-select-option
            v-for="d in datacenterList"
            :key="d.id"
            :value="d.id"
            >{{ d.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="动环节能">
        <a-switch
          v-decorator="[
            'powerConservation',
            { initialValue: info.powerConservation, valuePropName: 'checked' },
          ]"
        />
      </a-form-item>
      <a-form-item label="开启阈值">
        <a-input
          :max-length="4"
          autocomplete="off"
          style="width: 125px"
          addon-after="KWH"
          @keyup="clearNoNum"
          @blur="clearNoNum"
          v-decorator="[
            'threshold',
            {
              initialValue: info.threshold,
              rules: [
                { required: true, message: '请输入开启阈值' },
                { validator: validators.xmax({max:9999}), trigger: 'change', },
                { validator: validators.xmin({min:0}), trigger: 'change', },
              ],
            },
          ]"
        />
        <!-- <a-input-number
          :min="0"
          :max="999999"
          :parser="value => value ? (isNaN(value) ? 0 : parseInt(value)) : 0"
          v-decorator="[
            'threshold',
            {
              initialValue: info.threshold,
              rules: [{ required: true, message: '请输入开启阈值' }],
            },
          ]"
        />
        <div
          class="rule-unit"
        >
          KWH
        </div> -->
        <!-- <span style="display: inline-block;padding-left: 10px">Kwh</span> -->
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 4 }">
        <a-button type="primary" html-type="submit"> 提交 </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { gPostAction } from "@/api/manage";
import { filterNoNum } from "@/utils/util";

export default {
  name: "F010408",
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      datacenterList: [],
      info: {
        id: "",
        threshold: "",
        powerConservation: false,
      },
    };
  },
  mounted() {
    this.loadDatacenter();
  },
  methods: {
    clearNoNum() {
      this.form.setFieldsValue({
        threshold: filterNoNum(this.form.getFieldValue('threshold')),
      });
      this.form.validateFields(['threshold'], (errors, values) => {});
    },
    loadDatacenter() {
      gPostAction("/asset/pageDatacenter", {title:"精确管控与供电制冷联动-统一管理联动-动环节能", content: "查看动环节能策略设置"}).then((res) => {
        const data = res.data;
        if (data && data.list && data.list.length) {
          if (data.list[0].threshold === 0) {
            this.info.threshold = 0;
          } else {
            this.info.threshold = data.list[0].threshold || "";
          }
          this.datacenterList = data.list;
          this.info.id = data.list[0].id;
          this.info.powerConservation = data.list[0].powerConservation || false;
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const postData = {
            id: values.id,
            threshold: values.threshold,
            powerConservation: values.powerConservation,
            title: "精确管控与供电制冷联动-统一管理联动平台-动环节能",
            content: "设置动环节能"
          };
          gPostAction("/asset/updateDatacenter", postData).then((res) => {
            if (res.success) {
              this.loadDatacenter();
              this.$message.success("提交成功");
            }
          });
        }
      });
    },
    handleSelectChange(value) {
      // console.log("value is " + value);
      this.datacenterList.forEach((item) => {
        if (item.id === value) {
          this.form.setFieldsValue({
            powerConservation: item.powerConservation || false,
            threshold: item.threshold || "",
          });
        }
      });
    },
  },
  watch: {},
};
</script>
